<template>
    <div  id="xl">
        <!--表头结束-->
        <!--table开始-->

        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/s' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>门诊管理</el-breadcrumb-item>
            <el-breadcrumb-item>门诊收费</el-breadcrumb-item>
        </el-breadcrumb>


        <el-card>
            <!--表头-->
            <el-row>
                <el-col :span="4">
                    <el-input placeholder="请输入审批单号" v-model="eaaOrderNumber"  ></el-input>
                </el-col>

                <el-button  icon="el-icon-search" type="primary" @click="initData2(currPage,pageSize,eaaOrderNumber)"></el-button>
                <!--打印导入导出-->
                <el-button type="primary" @click="openCharge">增加</el-button>
            </el-row>
            <el-table
                    stripe
                    style="width: 100%"
                    :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            >
                <el-table-column
                    prop="prescription.prescriptionId"
                    label="门诊处方号">
                </el-table-column>
                <el-table-column
                        prop="prescription.registration.patient.patientDataName"
                        label="病人姓名">
                </el-table-column>
                <el-table-column
                        prop="chargeOperatorId"
                        label="经办人">
                </el-table-column>
                <el-table-column
                        prop="dotor"
                        label="医生">
                </el-table-column>
                <el-table-column
                    prop="chargeTime"
                    label="收费日期"
                    :formatter="dateformat">
                </el-table-column>
                <el-table-column
                        prop="prescription.registration.patient.medicalCard.medicalCardBalance"
                        label="诊疗卡余额">
                </el-table-column>
                <el-table-column
                    prop="prescription.prescriptionMoney"
                    label="应收金额">
                </el-table-column>

                <el-table-column  label="操作" width="130px">
                    <template  #default="scope">
                      <template v-if="scope.row.chargeStaff == 0">
                        <el-tooltip content="结算" placement="top">
                          <el-button
                              icon="el-icon-edit" size="mini"
                              @click="editCharge(scope.row)"></el-button>
                        </el-tooltip>
                      </template>

                      <template v-if="scope.row.chargeStaff == 1">
                        <el-tooltip content="详情" placement="top">
                          <el-button
                              icon="el-icon-delete" size="mini"
                              @click="chargeDetails(scope.row)"></el-button>
                        </el-tooltip>
                      </template>
                    </template>
                </el-table-column>
            </el-table>
            <br>
            <!--分页-->
            <div class="fy_div">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 20, 40]"
                        :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData.length">
                </el-pagination>
            </div>

        </el-card>
        <el-dialog
                title="收费管理"
                v-model="dialogVisible"
                width="60%"
                :before-close="handleClose">
            <el-form :model="charge" status-icon  ref="charge" label-width="100px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="门诊收费号" prop="chargeId">
                            <el-input v-model="charge.chargeId" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="收费日期" >
                            <el-date-picker
                                    v-model="charge.chargeTime"
                                    type="datetime"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="门诊号" prop="eSex">-->
<!--                            <el-input v-model="chargeForm.eSex" :disabled="true"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="病人姓名" prop="patient.patientDataName">-->
<!--                            <el-select v-model="chargeForm.patient.patientDataName" placeholder="请选择" value-key="patientDataId">-->
<!--                                <el-option-->
<!--                                        v-for="item in tableData"-->
<!--                                        :key="item.patient.patientDataId"-->
<!--                                        :label="item.patient.patientDataName"-->
<!--                                        :value="item.patient.patientDataName">-->
<!--                                </el-option>-->
<!--                            </el-select>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
                    <el-col :span="10">
                        <el-form-item label="应收金额" prop="prescriptionMoney">
                            <el-input v-model="charge.prescription.prescriptionMoney"></el-input>
                        </el-form-item>
                    </el-col>
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="实收金额" prop="eName">-->
<!--                            <el-input v-model="chargeForm.ePhone"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="应退金额" prop="eName">-->
<!--                            <el-input v-model="chargeForm.ePhone"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
                  <el-col :span="10">
                    <el-form-item label="经办人" prop="chargeOperatorId">
                      <el-input v-model="charge.chargeOperatorId"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="处方号" prop="room">
                      <el-input v-model="charge.prescription.prescriptionId"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="10" style="margin-left: 30px">
                    <el-radio v-model="radio1" label="1">其他方式结算</el-radio>
                    <el-radio v-model="radio1" label="2">诊疗卡结算</el-radio>
                  </el-col>
                </el-row>

                <el-row>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="手术项目收费清单" name="first">
                            <el-table
                                    :data="tableData1"
                                    style="width: 100%">
                                <el-table-column
                                        prop="project[0].projectId"
                                        width="250"
                                        label="手术项目编号">
                                </el-table-column>
                                <el-table-column
                                        prop="project[0].projectName"
                                        width="250"
                                        label="手术项目名称">
                                </el-table-column>
                                <el-table-column
                                        prop="prescriptionProjectSubtotal"
                                        width="250"
                                        label="手术项目价格">
                                </el-table-column>
                                <el-table-column
                                        prop="project.projectId"
                                        label="手术时间">
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="体检项目费用清单" name="second">
                            <el-table
                                    :data="tableData2"
                                    style="width: 100%">
                                <el-table-column
                                        prop="project[0].projectId"
                                        width="250"
                                        label="体检项目编号">
                                </el-table-column>
                                <el-table-column
                                        prop="project[0].projectName"
                                        width="250"
                                        label="体检项目名称">
                                </el-table-column>
                                <el-table-column
                                        prop="prescriptionProjectSubtotal"
                                        width="250"
                                        label="体检项目价格">
                                </el-table-column>
                                <el-table-column
                                        prop="name"
                                        label="体检时间">
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                      <el-tab-pane label="药品费用清单" name="third">
                        <el-table
                            :data="tableData3"
                            style="width: 100%">
                          <el-table-column
                              prop="drugEntity[0].drugId"
                              width="165"
                              label="药品编号">
                          </el-table-column>
                          <el-table-column
                              prop="drugEntity[0].drugName"
                              width="165"
                              label="药品名称">
                          </el-table-column>
                          <el-table-column
                              prop="drugEntity[0].drugPrice"
                              width="165"
                              label="药品单价">
                          </el-table-column>
                          <el-table-column
                              prop="medicineCount"
                              width="165"
                              label="药品数量">
                          </el-table-column>
                          <el-table-column
                              prop="medicineSubtotal"
                              width="165"
                              label="小计">
                          </el-table-column>
                        </el-table>
                      </el-tab-pane>
                    </el-tabs>
                </el-row>
            </el-form>

            <template #footer>
    <span class="dialog-footer">
      <el-button @click="ClearFrom">取 消</el-button>
      <el-button type="primary" @click="saveCharge()">确 定</el-button>
    </span>
            </template>
        </el-dialog>




    </div>
</template>

<script>
    import http, {service} from "@/http/request";
    import Cookies from 'js-cookie';
    import qs from "qs";
    import moment from "moment"
    import {ref} from "vue";
    export default {
        name: "chargeManager",
        components: {},


        data() {
            return {
              radio1: ref('1'),
                tableData:[],
              tableData1:[],
              tableData2:[],
              tableData3:[],
                dialogVisible: false,
                currentPage:1, //初始页
                pagesize:10,    //    每页的数据
                charge:{
                  chargeId:'',
                  chargeTime:'',
                  chargeOperatorId:'',
                  dotor:'',
                  chargeStaff:'',
                  chargeMoney:'',
                  prescription:{
                    prescriptionId:'',
                    doctor:'',
                    prescriptionTime:'',
                    registrationId:'',
                    prescriptionMoney:'',
                    registration:{
                      registrationId:'',
                      registrationNumber:'',
                      patientDataId:'',
                      room:'',
                      doctot:'',
                      registrationTime:'',
                      registrationFee:'',
                      registrationState:'',
                      registrationType:'',
                      registrationName:'',
                      patient:{
                        patientDataId:'',
                        patientDataCard:'',
                        patientDataName:'',
                        patientDataPhone:'',
                        patientDataSex:'',
                        medicalCardNumber:'',
                        medicalCard:{
                          medicalCardId: '',
                          medicalCardNumber: '',
                          medicalCardBalance:''
                        }
                      }
                    },
                  }
                },
              activeName: 'third'
            }
        },
      //获取折叠计算属性
      computed: {
        showUserName(){
          return Cookies.get('username')
        }
      },
        methods:{
          dateformat(row , column){
            const data = row[column.property]
            if (data == undefined){
              return
            }
            return moment(data).format("yyyy-MM-DD HH:mm:ss")
          },
          chargeDetails(s){
            this.$router.push({path: '/chargeDetailsManager',query:{ id:s.prescriptionId}});
          },
            initData(){
                service("http://localhost:8088/charge")
                    .then((v) => {
                        this.tableData = v.data;
                        console.log(v.data)
                    })
            },
          selectChargeOperationProject(row){
            service("http://localhost:8088/select_charge_operation_project",{params:{prescriptionId: row.prescription.prescriptionId}})
                .then((v) => {
                  this.tableData1 = v.data;
                })
          },
          selectChargeProject(row){
            service("http://localhost:8088/select_charge_project",{params:{prescriptionId: row.prescription.prescriptionId}})
                .then((v) => {
                  this.tableData2 = v.data;
                })
          },
          selectChargeDrug(row){
            service("http://localhost:8088/select_charge_drug",{params:{prescriptionId: row.prescription.prescriptionId}})
                .then((v) => {
                  this.tableData3 = v.data;
                })
          },
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
            },
            editCharge(row){
                this.charge = Object.assign({}, row)
                this.charge.chargeOperatorId = this.showUserName
                this.selectChargeOperationProject(row)
                this.selectChargeProject(row)
                this.selectChargeDrug(row)
                this.dialogVisible=true;
            },
          ClearFrom(){
            this.dialogVisible = false
          },
            saveCharge(){
              if (this.radio1==1){
                service.post("http://localhost:8088/update_charge",this.charge)
                    .then((v) => {
                      this.$message("其他收费执行成功！");
                      this.initData(this.currentPage, this.pageSize);
                    })
              }else if (this.radio1==2){
                if(this.charge.prescription.registration.patient.medicalCard.medicalCardBalance > this.charge.chargeMoney){
                  alert('余额'+this.charge.prescription.registration.patient.medicalCard.medicalCardBalance)
                  alert('应收'+this.charge.chargeMoney)
                  this.charge.number = this.charge.prescription.registration.patient.medicalCard.medicalCardBalance-this.charge.chargeMoney
                  alert('实收'+this.charge.number)
                  service.post("http://localhost:8088/update_charge2",this.charge)
                      .then((v) => {
                        this.$message("诊疗卡收费执行成功！");
                        this.initData(this.currentPage, this.pageSize);
                      })
                }else if(this.charge.prescription.registration.patient.medicalCard.medicalCardBalance < this.charge.chargeMoney){
                  this.$message('余额不足！');
                }
              }
              this.dialogVisible=false;

            },

          openCharge(){
            this.charge.chargeId= 'MZSF'+ this.getProjectNum()+ Math.floor(Math.random() * 10000);
            this.charge.chargeOperatorId = this.showUserName;
            this.getDataTime();
            this.dialogVisible = true;
          },
            deleteCharge(id){
                this.$confirm('你确定要删除该条信息吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'},
                    this.axios.post("http://localhost:8088/delCharge",qs.stringify({eId: id
                    })))
                    .then((v) => {
                        this.$message('删除成功！');
                        this.initData(this.currentPage, this.pageSize);
                    })
            },

            pageChange(p) {
                this.initData(p, this.pageSize)
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
          // 获取当前日期的方法
          getProjectNum () {
            const projectTime = new Date() // 当前中国标准时间
            const Year = projectTime.getFullYear() // 获取当前年份 支持IE和火狐浏览器.
            const Month = projectTime.getMonth() + 1 // 获取中国区月份
            const Day = projectTime.getDate() // 获取几号
            var CurrentDate = Year
            if (Month >= 10) { // 判断月份和几号是否大于10或者小于10
              CurrentDate += Month
            } else {
              CurrentDate += '0' + Month
            }
            if (Day >= 10) {
              CurrentDate += Day
            } else {
              CurrentDate += '0' + Day
            }
            return CurrentDate
          },
          //默认选中当前时间
          getDataTime(){
            this.charge.chargeTime = new Date();
          },
        },
      mounted() {
        let that = this;
        that.getDataTime()
      },
        created() {
            this.initData();

        },
    }
</script>

<style scoped>
    a {
        text-decoration: none;
    }
    .router-link-active {
        text-decoration: none;
    }

    .el-card{
        margin-top: 50px;

    }
    .block{
        margin-left: 350px;
    }
    .fy_div{
        margin-top:20px;
        margin-left: 450px;
    }
</style>